<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,body{
          background-color:rgba(255, 255, 255, 0);
        }
        .aui-btn-info.aui-active, .aui-btn-info:active {
            color: #fff !important;
            background-color: transparent!important;
        }
        #actionSheet-mask2{
          width: 100%;
          position: fixed;
          left: 0px;
          top: 0px;
          z-index: 10;
          background: rgba(0, 0, 0, 0.3);
        }
        .actionSheet{
          width: 100%;
          position: fixed;;
          bottom: 0;
          left: 0;
          z-index: 15;
          background: #fff;
          border-radius: 15px 15px 0 0;
        }
        .actionSheet h1{
          text-align: center;
          font-size: 18px;
          line-height: 18px;
          margin: 15px 0 21px 0;
        }
        .rechargeInput{
            width: 326px!important;
            height: 51px!important;
            border-radius: 5px!important;
            box-shadow: 0px 0px 8px #dadada!important;
            margin: 0 auto!important;
            text-align: center;
                font-size: 17px!important;
        }
        .actionSheet input::-webkit-input-placeholder{
          font-size: 18px;
        }
        .slides-enter-active, .slides-leave-active {
          transition: opacity .3s;
        }
        .slides-enter, .slides-leave-to  {
          opacity: 0;
        }
        .slidesLeft-enter-active {
          transition: all .2s ease;
        }
        .slidesLeft-leave-active {
          transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slidesLeft-enter, .slidesLeft-leave-to {
          transform: translateY(300px);
        }
        .loninBtnse {
            margin: 25px 0;
        }
        .cashInfo{
           padding: 0 28px;
           line-height: 16px;
           margin-top: 21px;
        }
        .moreCash{
          float: right;
          font-size: 15px;
          color:#E50013!important;
        }
        .allowBalance{
          font-size: 15px;
        }
        .loninBtn {
          width: 245px;
          height: 40px!important;
          line-height: 40px!important;
          background: url(../../image/main/ailPay@2x.png ) no-repeat center;
          background-size: 100%;
          background-color: rgba(255, 255, 255, 0) !important;
          margin: 0 auto;
        }
        .loninBtnSure{
          background: url(../../image/sure@2x.png ) no-repeat center;
          background-size: 100%;
        }
        .cashSection h2{
          margin-bottom: 20px;
        }
        /*适配屏幕320px*/
        @media (max-width: 320px){
            .rechargeInput {
                width: 217px!important;
                height: 34px!important;
             }
             .cashInfo{
                padding: 0 50px;
                margin-top: 14px
             }
             .allowBalance,
             .moreCash{
               font-size: 10px;
             }
             .actionSheet h1{
                margin: 15px 0 14px 0;
             }
             .actionSheet h1 ,
             .rechargeInput,
             .actionSheet input::-webkit-input-placeholder{
                 font-size: 12px;
             }
             .opreatBtn1, .opreatBtn2 {
                  width: 100px;
                  height: 26px;
              }
              .aui-grid {
                  margin: 20px 0;
              }
              .loninBtn {
                width: 163px;
                height: 27px!important;
              }
              .loninBtnse {
                  margin-top: 17px;
              }
              .cashSection h2{
                margin-bottom: 13px;
              }
        }
    </style>
</head>

<body>
    <div class="moreSection" id="moreSection" v-bind:style="{height:wHeight}" >
       <transition name="slides">
         <div class="actionSheet-mask" id="actionSheet-mask2" v-bind:style="{height:wHeight}" v-if="showMask1" @click.self="hidUserSection()">
          </div>
       </transition>
       <transition name="slidesLeft">
          <section class="actionSheet"  v-if="showMask2">
               <h1>提现</h1>
               <h2><input type="number" ref="rechargeValue" class="rechargeInput" placeholder="请输入提现金额"></h2>
               <div class="cashInfo">
                 <span class="allowBalance">可提现金额{{allowBalance}}</span>
                 <span class="moreCash">全部提现</span>
               </div>
               <section class="aui-content-padded loninBtnse">
                   <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm loninBtn" v-on:click="gotoResetAccount()"></div>
               </section>
          </section>
       </transition>
       <transition name="slidesLeft">
          <section class="cashSection actionSheet"  v-if="showMask3">
               <h1>支付宝账号</h1>
               <h2><input type="number" ref="rechargeValue" class="rechargeInput" placeholder="请输入账号"></h2>
               <h2><input type="number" ref="rechargeValue" class="rechargeInput" placeholder="请输入姓名"></h2>
               <section class="aui-content-padded loninBtnse">
                   <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm loninBtn loninBtnSure" v-on:click=""></div>
               </section>
          </section>
       </transition>
   </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function() {
       api.parseTapmode();
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    ////初始化页面
    var app = new Vue({
        el: '#moreSection',
        data: {
            wHeight: '',
            balance : "7,500.00",
            disBalance : "1452.00",
            showMask1 : true,
            showMask2 : false,
            showMask3 : false,
            allowBalance : '7,500.00'
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh) + 'px';
            },
            gotoComment : function(){
              bf_common_view.bf_win.openWin('userComment', '../main/');
            },
            hidUserSection : function(){
               this.showMask2 = false;
               setTimeout(function(){
                   api.closeFrame({
                     animation: {
                        type:"none",                //动画类型（详见动画类型常量）
                        duration:200
                     }
                   });
               },300)
            },
            gotoResetAccount : function(){
              this.showMask2 = false;
              this.showMask3 = !this.showMask3;
            }
        },
        mounted: function () {
             this.showMask2 = !this.showMask2;
        }
    });
    var mainPageMethod = {

    };
    app.init();
</script>

</html>
